// 数据生成
<template>
    <div>
        <el-button :loading='btnLoading' size="medium" type="info" @click="showDrawer=true">{{btnName}}</el-button>
        <el-drawer
            title="数据生成"
            :visible.sync="showDrawer"
            direction="rtl"
            :modal="false">
            <template> 
                <div class="el-form--box">
                    <p v-show="!date" class="c-red f-12 mb8 ml55">请先选择日期！</p>
                    <el-form autocomplete="off"   label-width="55px">
                        <el-form-item label="日期" prop='date'>
                            <el-date-picker
                                v-model="date"
                                type="month"
                                format="yyyy年MM月"
                                value-format="yyyy-MM"
                                placeholder="选择日期"
                                :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-form-item>
                    </el-form>
                </div>
                <slot ></slot>
            </template> 
        </el-drawer>
    </div>
</template>

<script>
export default {
    name:'generatingData',
    props:{
        btnLoading:{
            type: Boolean,
            default: false
        },
        btnName:{
            type: String,
            default: '数据生成'
        }
    },
    watch:{
        showDrawer(flag){
            if(!flag){
                this.date = ""
            }
        }
    },
    data(){
        return{
            showDrawer: false,
            date:'',
            pickerOptions: {
                disabledDate(time) {
                let date = new Date()
                let year = date.getFullYear()
                let month = date.getMonth()
                let str = year + '-' + (month + 1) + '-' + 1
                let newDate = new Date(str)
                return time.getTime() >= newDate.getTime()
                }
            }
        }
    },
    methods:{
        verification(){
            if(this.date) return this.date
            return false
        }
    }
}
</script>

<style lang='less'>
.el-form--box{
    margin-bottom: 25px;
}
.el-drawer__body{
    padding: 0 8px;
}
.btns{
    padding: 0 52px;
    .el-button{
      width: 200px;
      margin: 0 0 16px 0;
    }
  }
</style>